<template>
  <div class="list">
    <div class="box" v-for="item in golist" :key="item.id" @click="skipList(item.id,item.name)">
      <img :src="item.icon_url" alt="" :title="item.name">
      <p>{{item.name}}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  props : ['golist'],
  methods: {
    skipList(id,title) {
      console.log(id);
      this.$router.push(`/firstListDetails/${id}/${title}`)
    }
  },
}
</script>

<style lang="less" scoped>
  .list {
    display: flex;
    // justify-content: space-between;
    background-color: #fff;
    margin-bottom: 10px;
   .box {
     padding: 15px 10px;
    width: 20%;
     border-right: 1px solid #ebedf0;
     text-align: center;
     img {
       width: 50%;
     }
     p {
       text-align: center;
       color: #646566;
       font-size: 14px;
     }
   } 
   .box:last-of-type {
     border-right: 0px;
   }
  }
</style>